<!DOCTYPE html>
<html>
	<head>
		<title>Dynamic Text Search</title>
		<script type="text/javascript" src="../js-lib/jquery/core/jquery-1.6.2.js"></script>
		<script type="text/javascript" src="plugin/dynamic-search-plugin.js"></script>
		<!-- Using Component Reposition Plugin along with Dynamic Search Plugin. -->
		<script type="text/javascript" src="../ComponentReposition/plugin/component-reposition-plugin.js"></script>
		
		<link rel="stylesheet" type="text/css" href="style/style.css" />
		
		<style>
			#apply-dynamic-search {
				position: absolute;
				top: 200px;
				left: 200px;
			}
		</style>
	</head>
	<body>
		<div class="info">
			* Press Ctrl + Alt + S to show search box.<br/>
			* Press Esc to close the search box.
		</div>
		<table id="apply-dynamic-search">
			<thead>
				<tr>
					<th>SNo.</th>
					<th>Car Make</th>
					<th>Car Name</th>
					<th>Engine(cc)</th>
					<th>Length(mm)</th>
					<th>Width(mm)</th>
					<th>Height(mm)</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1.</td>
					<td>Aston Martin</td>
					<td>Aston Martin V12 Vantage</td>
					<td class="alignCenter">5935cc V12</td>
					<td class="alignCenter">4380</td>
					<td class="alignCenter">1865</td>
					<td class="alignCenter">1241</td>
				</tr>
				<tr>
					<td>2.</td>
					<td>Audi</td>
					<td>Audi A4 1.8 TFSI</td>
					<td class="alignCenter">1798cc</td>
					<td class="alignCenter">4703</td>
					<td class="alignCenter">1772</td>
					<td class="alignCenter">1427</td>
				</tr>
				<tr>
					<td>3.</td>
					<td>Bentley</td>
					<td>Bentley Azure Convertible</td>
					<td class="alignCenter">6761cc</td>
					<td class="alignCenter">5410</td>
					<td class="alignCenter">1900</td>
					<td class="alignCenter">1492</td>
				</tr>
				<tr>
					<td>4.</td>
					<td>BMW</td>
					<td>BMW 7-Series 730Ld Sedan</td>
					<td class="alignCenter">2993cc</td>
					<td class="alignCenter">5179</td>
					<td class="alignCenter">1902</td>
					<td class="alignCenter">1484</td>
				</tr>
			</tbody>
		</table>
	</body>
	
	<script>
		jQuery( document ).ready(function() {
			var config = {
				searchBoxPosition: 'bottom',
				searchBoxMargins: "2,-1"
			};
			
			dynamicSearch.initialize( config );
		});
	</script>
</html>